<template>
	<view class="page">
		<topVue title="活动区"></topVue>
		<view class="rightClick flex align-center" @click="navigate('./shopcar', 3)">
			<image src="../../static/shop_car.png" style="width: 42rpx; height: 42rpx;"></image>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiperVue">
			<u-swiper :list="swiperList" height="320" name="picUrl"></u-swiper>
		</view>
		<!-- 推广任务 -->
		<!-- <view class="box padding30">
			<view class="flex-between align-center">
				<view class="title">推广任务</view>
				<view class="more">查看全部</view>
			</view>
			<view class="taskItem margin20 flex align-center padding30" v-for="(item, index) in 2" :key="index">
				<view class="iconVue relative">
					<image src="../../static/index/people.png" style="width: 40rpx; height: 40rpx;" class="absolute-auto"></image>
				</view>
				<view class="right flex-column flex-between">
					<view class="flex-between align-center">
						<view class="taskName">邀请好友</view>
						<view class="award">奖励50积分</view>
					</view>
					<u-line-progress active-color="#1CC289" :striped="true" :striped-active="true" :percent="70" height="30"></u-line-progress>
				</view>
			</view>
		</view> -->
		
		<!-- 限时特惠 -->
		<view class="box padding30">
			<view class="flex-between align-center">
				<view class="title">限时特惠</view>
			</view>
			<!-- 产品列表 -->
			<view class="productVue flex-wrap flex-between">
				<view class="product" v-for="(item, index) in list" :key="index" @click="navigate('./productDetail_3', item.id)">
					<view class="picture relative">
						<image :src="item.picUrl" style="width: 100%; height: 100%; border-radius: 12rpx 12rpx 0 0;"></image>
					</view>
					<view class="info padding20 flex-column flex-between">
						<view class="name line-1">{{item.name}}</view>
						<view class="flex align-center">
							<text class="newPrice">￥{{item.price/100}}</text>
							<text class="oldPrice">￥{{item.marketPrice/100}}</text>
						</view>
						<view class="flex align-center">
							<image src="../../static/green_g.png" style="width: 42rpx; height: 42rpx;"></image>
							<text class="pointPrice">{{item.price/100}}绿色积分</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				swiperList: [],
				pageNum: 1,
				pageSize: 10,
				list: [],
				pages: 0,
			}
		},
		
		async onLoad() {
			await this.getBannerList()
			await this.getList()
		},
		
		async onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			await this.getList()
		},
		
		methods: {
			// 登录校验跳转
			navigate(path, value){
				if(!this.$store.state.isLogin) return this.$tools.route("../login/login")
				uni.navigateTo({
					url: path + "?value=" + value
				})
			},
			// 轮播图
			async getBannerList(){ 
				const result = await this.$request("/app-api/promotion/banner/list", "GET", {
					position: 2
				})
				console.log(result)
				if(result.code===0) this.swiperList = result.data
				console.log("轮播图", this.swiperList)
			},
			
			async getList(){
				const result = await this.$request("/app-api/product/spu/page", "GET", {
					categoryId: 3,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				})
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					console.log("总页数", this.pages)
					console.log("活动区商品列表", this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.swiperVue {
		width: 100%;
		padding: 10rpx 30rpx 0;
	}
	.menuVue {
		width: 100%;
	}
	.box {
		width: 100%;
		.title {
			font-weight: 600;
			color: #333;
			font-size: 30rpx;
		}
		.more {
			color: #6B7280;
		}
		.taskItem {
			width: 100%; 
			height: 120rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			.iconVue {
				width: 80rpx;
				height: 80rpx;
				background: rgba(34,144,65,0.1);
				border-radius: 15rpx;
			}
			.right {
				flex: 1;
				height: 80rpx;
				padding-left: 20rpx;
				.taskName {
					font-weight: 600;
					line-height: 1;
				}
				.award {
					color: #1CC289;
					line-height: 1;
				}
			}
		}
		.productVue {
			width: 100%;
			padding-top: 20rpx;
			.product {
				width: 330rpx;
				height: 500rpx;
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
				.picture {
					width: 330rpx;
					height: 330rpx;
				}
				.info {
					width: 100%;
					height: 170rpx;
					.name {
						color: #333;
						font-weight: 600;
						line-height: 1;
					}
					.newPrice {
						color: #1CC289;
						font-weight: 600;
						line-height: 1;
					}
					.oldPrice {
						color: #666;
						text-decoration: line-through;
						line-height: 1;
						padding-left: 20rpx;
					}
					.pointPrice {
						color: #1CC289; 
						line-height: 1;
						font-weight: 600;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
</style>